<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <center>
        <table>
            <tr>
                <td><input type="text" id="sou"></td>
                <td><button id="search">搜索</button></td>
            </tr>
        </table>
        <table id="table">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>身份证号</td>
                <td>班级号</td>
                <td>状态</td>
                <td>编辑</td>
            </tr>
            <?php foreach($data as $key => $v) { ?>
                <tr class="box">
                    <td><?=$v['sid']?></td>
                    <td >
                        <span id="name"><?=$v['name']?></span><input type="text" style="display: none" eid="<?=$v['sid']?>" class="edit">
                    </td>
                    <td>
                        <?=$v['sex']?>
                    </td>
                    <td><?=$v['sfz']?></td>
                    <td><?=$v['cid']?></td>
                    <td><?=$v['state']?></td>
                    <td><button id="del" did="<?=$v['sid']?>">删除</button></td>
                </tr>
            <?php } ?>
        </table>
        <div id="page">
            <a href="javascript:void(0)" page="1">首页</a>
            <a href="javascript:void(0)" page="<?=$next?>">下一页</a>
            <a href="javascript:void(0)" page="<?=$up?>">上一页</a>
            <a href="javascript:void(0)" page="<?=$last?>">尾页</a>
        </div>
    </center>
</body>
</html>
<script type="text/javascript" src="http://localhost/11month/public/jquery-1.9.1.min.js"></script>
<script>
    $(document).on("click","#page a",function () {
        var page = $(this).attr("page");
        var search = $("#sou").val();
        $.ajax({
            type:"get",
            url:"{:url('index/show')}",
            data:{page:page,search:search},
            success:function (res) {
                table(res);
                page1(res);
            }
        })
    })

    $(document).on("click","#search",function () {
        var search = $("#sou").val();
        $.ajax({
            type:"get",
            url:"{:url('index/show')}",
            data:{search:search},
            success:function (res) {
                table(res);
                page1(res);
            }
        })
    })

    $(document).on("click","#del",function () {
        var search = $("#sou").val();
        var id     = $(this).attr("did");
        var _this  = $(this)
        $.ajax({
            type:"get",
            url:"{:url('index/del')}",
            data:{id:id,search:search},
            success:function (res) {
                if (res){
                    alert("删除成功");
                    _this.parent().parent().remove();
                }else{
                    alert("删除失败");
                }
            }
        })
    })

    $(document).on("click","#name",function () {
        $(this).next().show();
        $(this).hide()
    });

    $(document).on("blur",".edit",function () {
        var name = $(this).val();
        var eid  = $(this).attr("eid");
        $(this).hide();
        $(this).parent().show();
        $(this).parent().text(name);
        $.ajax({
            type:"get",
            url:"{:url('index/edit')}",
            data:{name:name,id:eid},
            success:function (res) {
                
            }
        })
    });

    function table(res){
        str = '';
        console.log(res)
        $.each(res.data,function (i,v) {
            str += '<tr class="box"><td>'+v['sid']+'</td>';
            str += '<td><span id="name">'+v['name']+'</span><input type="text" style="display: none" eid="'+v['sid']+'" class="edit"></td>';
            str += '<td>'+v['sex']+'</td>';
            str += '<td>'+v['sfz']+'</td>';
            str += '<td>'+v['cid']+'</td>';
            str += '<td>'+v['state']+'</td>';
            str += '<td><button id="del" did="'+v['sid']+'">删除</button></td>';
        });
        $(".box").remove();
        $("#table").append(str);
    }

    function page1(res) {
        str = '';
        str += '<a href="javascript:void(0)" page="1">首页</a>';
        str += '<a href="javascript:void(0)" page="'+res.next+'">下一页</a>';
        str += '<a href="javascript:void(0)" page="'+res.up+'">上一页</a>';
        str += '<a href="javascript:void(0)" page="'+res.last+'">尾页</a>';

        $("#page").empty();
        $("#page").append(str);
    }
</script>